<template>
  <div class="common-layout">

    <el-container>
      <!-- 左侧导航栏 -->
      <LiftMenu />

      <el-container>
        <el-header>
          <!-- 首页头部 -->
          <Header />
        </el-header>

        <el-main class="main">
          <!-- 首页二级分页 -->
          <!-- 当前页面为首页时 -->
          <div class="main_01" v-if="!state">
            <Home />
            <div class="main_02">

              <div class="main_left">
                <Topfilter />
                <Recommend />
              </div>

              <div class="sidebar" :class="{ 'is-fixed': isFixed }">
                <Banner />
              </div>

            </div>
          </div>

          <!-- 当前页面为其他功能页面时 -->
          <div class="main_02" v-else>
            <router-view />
          </div>


        </el-main>

        <!-- 首页尾部 -->
        <div>
          <foot />
        </div>

      </el-container>
    </el-container>

  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import LiftMenu from "../components/common/LiftMenu.vue";
import Header from "../components/common/Header.vue";
import Home from "../components/Home.vue";
import Topfilter from "../components/Topfilter.vue";
import Recommend from "../components/Recommend.vue";
import foot from "../components/common/footer.vue"
import Banner from '../components/Banner.vue'

//Pinia 存储state状态，进行酒店页面和其他功能页面的切换
import { useUserView } from "../store/UserView";
import { storeToRefs } from "pinia";
const UserView = useUserView();
let { state } = storeToRefs(UserView)

const router = useRouter();
//下拉触顶固定
let scrollTopVal = ref(0);
let isScroll = ref(false);
let banner_height = ref(0)
let isFixed = ref(false)
let hei = document.body.scrollHeight
onMounted(() => {
  window.addEventListener('scroll', scrollTop, true);
  let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;
  isScroll.value = elVal.scrollHeight > elVal.clientHeight;
})
onUnmounted(() => {
  window.addEventListener('scroll', scrollTop, true);
})
// 实时滚动条高度
const scrollTop = () => {
  //获取元素
  const recommend_left = document.querySelector('.recommend-left')
  const recommend_buttom = document.querySelector('.recommend-buttom')
  //获取元素高度
  let height = recommend_left.offsetTop + recommend_buttom.offsetTop - 350
  console.log(height);
  
  //计算卷曲高度
  nextTick(() => {
    let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;
    scrollTopVal.value = elVal.scrollTop;
    banner_height.value = elVal
  })
  if (banner_height.value > 250 && banner_height.value < height) {
    isFixed.value = true
  } else {
    isFixed.value = false
  }
}

</script>

<style lang='css' scoped>
.main_02 {
  width: 1250px;
  height: auto;
  display: flex;
  gap: 0px 20px;
  padding: 10px, 0;
}

.main_left {
  width: 780px;
}

.sidebar {
  width: 450px;
  height: 500px;
  /* 设置侧边栏宽度 */
  padding-right: 10px;
  position: relative;
  /* 设置相对定位 */
}

.is-fixed {
  position: fixed;
  /* 设置固定定位 */
  top: 70px;
  right: 2px;
  /* 设置固定在顶部 */
  margin-left: 20px;
  /* 设置固定后的左边距 */
  bottom: 50px;
}

.main {
  padding-left: 0px;
  padding-bottom: 50px;
  width: 100%;
  overflow: hidden
}

.main_01,
.main_02 {
  padding-left: 20px;
}
</style>
